<script setup>
import { getTopicPage1 } from '@/api/Topic.js'
import { ref, watch } from "vue";
import { getTopic } from '@/api/Topic.js'
import { topicStore } from '@/store/index.js'
import router from '@/router';


const formModel = ref({})

const updateTopic = topicStore()

const Obj= async() => {

const res =  await getTopicPage1()
formModel.value = res.data.items
}
Obj()

const updateId = async (item)=>{
  const res =  await getTopic(item)
  updateTopic.updateTopic(res.data)
  updateTopic.isnew = false
  updateTopic.topicOk =false
  updateTopic.topicOk1 =false
  updateTopic.topicOk2 =false
  updateTopic.topicOk3 =false
  updateTopic.topicOk4 =false
  updateTopic.formattedTime = '00:00:00'
  updateTopic.isTimerRunning = true
  console.log(updateTopic.topic)
  
}

const backTopic = () =>{
  router.push('/topic')
}


</script>

<template>
  <div class="left">
    <el-scrollbar style="height: 592px;">
      <div  v-for="(item,index) in formModel" :key="index" class="scrollbar-demo-item" @click="updateId(item.id)">
        <span class="ellipsis-text">{{ index+1 }}、{{item.topicName}}</span>
        <p >{{item.topicContent}}</p>
      </div>
    </el-scrollbar>
    <el-button @click="backTopic()" class="retuenBtn">

    </el-button>
  </div>
</template>

<style lang="scss" scoped>
.left {
  width: 240px;
  background-color: #166262;
  .scrollbar-demo-item {
    color: #fff;
    height: 60px;
    padding: 10px 26px 0 40px;
    text-align: left;
    border-bottom: 1px solid #fff;
    background: linear-gradient(0deg, #0f4747 0%, #196a6a 100%);
    P{
      margin-top: 9px;
      font-size: 12px;
      white-space: nowrap;         /* 禁止换行 */
      overflow: hidden;            /* 隐藏溢出内容 */
      text-overflow: ellipsis;     /* 显示省略号 */

    }
    .ellipsis-text {
      white-space: nowrap;         /* 禁止换行 */
      overflow: hidden;            /* 隐藏溢出内容 */
      text-overflow: ellipsis;     /* 显示省略号 */
    }
  }
  .retuenBtn{
    width: 180px;
    height: 50px;
    margin-top: 100px;
    margin-bottom: 89px;
    background: url("@/assets/icon_ReturnMain.png") no-repeat center / cover;
    background-size: cover; /* 让背景图片覆盖整个元素 */
    background-position: center; /* 将背景图片居中显示 */
    /* 其他样式设置，如颜色、边距等 */
  }
}
</style>